@import '../../../styles/variable.less';

.mat-btn {
  // 按钮类型白色字体
  .mat-btn-type-white(@borderColor, @backGround: @color-default, @Color: @color-default) {
    color: @Color;
    background: @backGround;
    border-color: @borderColor;

    .mat-icon {
      color: @Color;
    }

    &.mat-btn-plain {
      color: @borderColor;
      background: @color-default;

      .mat-icon {
        color: @borderColor;
      }

      &.disabled {
        color: lighten(@borderColor, 20%);
        background: lighten(@color-default, 20%);

        .mat-icon {
          color: lighten(@borderColor, 20%);
        }
      }
    }

    &.disabled {
      @color-lighten-20: lighten(@Color, 20%);
      color: @color-lighten-20;
      background: lighten(@backGround, 20%);
      border-color: lighten(@borderColor, 20%);
      cursor: not-allowed;

      .mat-icon {
        color: @color-lighten-20;
      }
    }
  }

  position: relative;
  display: inline-block;
  max-width: 100%;
  height: 40px;
  padding: 0 15px;
  font-size: @font-size;
  font-style: normal;
  line-height: 38px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: @border-radius-default;
  outline: none;

  /* 主题样式 start */
  &.mat-btn-default {
    .mat-btn-type-white(@border-color-default, @color-default, @font-color);
  }

  &.mat-btn-primary {
    .mat-btn-type-white(@color-primary, @color-primary);
  }

  &.mat-btn-success {
    .mat-btn-type-white(@color-success, @color-success);
  }

  &.mat-btn-info {
    .mat-btn-type-white(@color-info, @color-info);
  }

  &.mat-btn-warning {
    .mat-btn-type-white(@color-warning, @color-warning);
  }

  &.mat-btn-danger {
    .mat-btn-type-white(@color-danger, @color-danger);
  }

  /* 主题样式 end */

  // 图标样式
  .mat-icon {
    margin-right: 5px;
  }
}
